<template>
    <view class="bg-white news-detail">
        <!-- 标题信心 -->
        <view class="news-detail-header py-[20rpx] px-[30rpx]">
            <view class="text-3xl font-medium">{{ newsData.title }}</view>
            <view class="flex mt-[20rpx] text-xs">
                <view class="mr-[40rpx]" v-if="newsData.author">作者: {{ newsData.author }}</view>
                <view class="text-muted mr-[40rpx] flex-1">{{ newsData.createTime }}</view>
                <view class="flex items-center flex-none text-muted">
                    <image
                        :src="$getImg('/img/images/icon/icon_visit.png')"
                        class="w-[30rpx] h-[30rpx]"
                    ></image>
                    <view class="ml-[10rpx]">{{ newsData.visit }}</view>
                </view>
            </view>
        </view>

        <!-- 咨询内容 -->
        <view class="news-detail-section bg-white p-[24rpx]">
            <!-- 摘要 -->
            <view class="summary p-[20rpx] text-base" v-if="newsData.summary">
                <text class="font-medium">摘要:</text>
                {{ newsData.summary }}
            </view>
            <!-- 内容 -->
            <view class="mt-[20rpx]">
                <u-parse
                    :html="newsData.content"
                    :selectable="true"
                    :lazyLoad="true"
                    :domain="domain"
                ></u-parse>
            </view>
        </view>

        <view
            class="fixed bottom-0 right-0 flex items-center mb-16 mr-4"
            @click="handleAddCollect(newsData.id)"
        >
            <u-icon
                :name="newsData.collect ? 'star-fill' : 'star'"
                size="40"
                :color="newsData.collect ? '#F7BA47' : '#333'"
            ></u-icon>
            <text class="ml-2">收藏</text>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onShareAppMessage } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { onLoad } from '@dcloudio/uni-app'
import { getArticleDetail, addCollect, cancelCollectByArticleId } from '@/api/news'
import { storeToRefs } from 'pinia'

const newsData = ref<any>({})
let newsId = ''
const domain = import.meta.env.VITE_APP_BASE_URL

const getData = async (id) => {
    const userStore = useUserStore()
    const { userInfo } = storeToRefs(userStore)

    const userId = userInfo.value?.appUser?.userId
    const { data } = await getArticleDetail({ id, userId })
    newsData.value = data
}

const handleAddCollect = async (articleId: string) => {
    try {
        if (newsData.value.collect) {
            await cancelCollectByArticleId({ articleId })
            uni.$u.toast('已取消收藏')
        } else {
            await addCollect({ articleId })
            uni.$u.toast('收藏成功')
        }
        getData(newsId)
    } catch (e) {
        //TODO handle the exception
    }
}

onShareAppMessage(() => {
    return {
        title: newsData.value.title,
        path: '/pages/news_detail/news_detail?id=' + newsId
    }
})

onLoad((options: any) => {
    newsId = options.id
    getData(newsId)
})
</script>

<style lang="scss" scoped>
.news-detail {
    height: 100%;

    &-header {
        border-bottom: 2 rpx solid #f8f8f8;
    }

    &-section {
        .summary {
            border-radius: 12 rpx;
            background-color: #f7f7f7;
        }
    }
}
</style>
